<template>
    <div class="com_echarts">
        <div class="chart-title">
            <img src="../../../assets/images/screen/health_resource/FilletRectangle.png" alt="">
            <p>平均住院日</p>
        </div>
        <div class="right_bottom_second" id="right_bottom_second"></div>
    </div>
</template>

<script>
import echarts from 'echarts';
import echartsrender from '../../../assets/js/jquery.echarts';
export default {
  name: 'right_bottom_second',
  data () {
    return {
        id:"right_bottom_second"
    }
  },
  created () {

  },
  mounted(){
      this.initbar();
  },
  methods:{
    initbar(){
        let that = this;
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById(this.id));

        var option = {
            tooltip: {},
            grid:{
                top:'10%',
                bottoom:'0%'
            },
            legend: {
                data:['医院', '社区卫生服务中心','乡镇卫生院'],
                bottom:'0%',
                textStyle:{
                    color:"rgba(255,255,255,0.7)"
                }
            },
            xAxis: {
                data: ["医院", "社区卫生服务中心", "乡镇卫生院"],
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                axisLabel: {
                    show: false,
                    textStyle: {
                        color: '#e54035'
                    }
                }
            },
            yAxis: {
                splitLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                axisLabel: {
                    show: false
                }
            },
            series: [//为了lengend显示
                {
                    name: '医院',
                    type: 'pictorialBar',
                    itemStyle: {
                        normal: {
                            color: '#14b1eb'
                        }
                    },
                },
                { 
                    name: '社区卫生服务中心',
                    type: 'pictorialBar',
                    itemStyle: {
                        normal: {
                            color: '#FF33FF'
                        }
                    },
                },
                { 
                    name: '乡镇卫生院',
                    type: 'pictorialBar',
                    itemStyle: {
                        normal: {
                            color: '#E89F1C'
                        }
                    },
                },
                {//上面点
                name: '',
                type: 'pictorialBar',
                symbolSize: [33, 23],
                symbolOffset: [0, -15],
                z: 12,
                itemStyle: {
                    normal: {
                        color: '#14b1eb'
                    }
                },
                data: [{
                    value: 100,
                    symbolPosition: 'end',
                    itemStyle: {
                        normal: {
                            color: '#14b1eb'
                        }
                    }
                }, {
                    value: 50,
                    symbolPosition: 'end',
                    itemStyle: {
                        normal: {
                            color: '#FF33FF'
                        }
                    }
                }, {//乡镇卫生院
                    value: 20,
                    symbolPosition: 'end',
                    itemStyle: {
                        normal: {
                            color: '#E89F1C'
                        }
                    }
                }]
            }, {//底部点
                name: '',
                type: 'pictorialBar',
                symbolSize: [33, 23],
                symbolOffset: [0, 15],
                z: 12,
                itemStyle: {
                    normal: {
                        color: '#14b1eb'
                    }
                },
                data: [{
                    value:100,
                    itemStyle: {
                        normal: {
                            color: '#14b1eb'
                        }
                    }
                },{
                    value:50,
                    itemStyle: {
                        normal: {
                            color: '#FF33FF'
                        }
                    }
                },{//乡镇卫生院
                    value:20,
                    itemStyle: {
                        normal: {
                            color: '#E89F1C'
                        }
                    }
                }]
            }, {//外圈圆
                name: '',
                type: 'pictorialBar',
                symbolSize: [50, 40],
                symbolOffset: [0, 28],
                z: 11,
                itemStyle: {
                    normal: {
                        color: 'transparent',
                        borderColor: '#14b1eb',
                        borderWidth: 5
                    }
                },
                data: [100, 50, 20]
            }, {//内圈圆
                name: '',
                type: 'pictorialBar',
                symbolSize: [80,60],
                symbolOffset: [0, 38],
                z: 10,
                itemStyle: {
                    normal: {
                        color: 'transparent',
                        borderColor: '#14b1eb',
                        borderType: 'dashed',
                        borderWidth: 5
                    }
                },
                data: [100, 50, 20]
            }, {
                type: 'bar',
                itemStyle: {
                    normal: {
                        color: '#14b1eb',
                        opacity: .8
                    }
                },
                silent: true,
                barWidth: 30,
                barGap: '-50%', // Make series be overlap
                // data: [100, 50, 20]
                data:[{
                    value:100,
                    itemStyle: {
                        normal: {
                            color: '#14b1eb'
                        }
                    }
                },{
                    value:50,
                    itemStyle: {
                        normal: {
                            color: '#FF33FF'
                        }
                    }
                },{
                    value:20,
                    itemStyle: {
                        normal: {
                            color: '#FFFF33'
                        }
                    }
                }]
            }]
        }
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }
  }
}
</script>
<style lang='scss'  rel="stylesheet/scss" scoped>
.com_echarts{
    width:100%;
    height:100%;
}
.chart-title{
    img{
        float: left;
        width: 6px;
        height: auto;
        margin-left: 5px;
        margin-top: 5px;
    }
    p{
        font-size: 12px;
        color: #58ADE3;
        line-height: 2.5;
        margin-left: 15px;
    }
}
.right_bottom_second{
    width:99%;
    height:86%;
    float: left;
}
</style>
